<template>
  <div>
    <h3>欢迎光临！昱樨❤金博收银系统</h3>
    <table>
      <tr>
        <td>苹果 {{ price }}￥/斤 ， 折扣 {{ discount }}折</td>
      </tr>
      <tr>
        <td>请输入你要购买的斤数<input type="text" v-model="num" /></td>
      </tr>
      <tr>
        <td><button @click="fn">结账买单</button></td>
      </tr>
      <tr>
        <td>
          结账单：原价：{{ sum }}￥ 折后价：{{ reality }}￥ 折扣：{{
            discountPrice
          }}￥
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 10,
      discount: 8,
      num: "0",
      sum: 0,
      reality: 0,
      discountPrice: 0,
    };
  },
  methods: {
    fn() {
      this.sum = this.price * +this.num;
      this.reality = this.discount * +this.num;
      this.discountPrice = this.sum - this.reality;
    },
  },
};
</script>

<style>
div {
  text-align: center;
}
table {
  margin: 0 auto;
}
table,
th,
td {
  border: 1px solid black;
  width: 600px;
}
</style>
